<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 1.5;
        ctx.font = "18px 'Times New Roman'";
        ctx.fillStyle = '#000';

        // Origin
        const O = { x: 150, y: 300 };

        // --- Draw Axes ---
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        }

        ctx.beginPath();
        // y-axis
        ctx.moveTo(O.x, O.y + 50);
        ctx.lineTo(O.x, O.y - 200);
        drawArrow(O.x, O.y + 50, O.x, O.y - 200);
        ctx.fillText('y', O.x - 25, O.y - 190);

        // x-axis
        ctx.moveTo(O.x - 50, O.y);
        ctx.lineTo(O.x + 250, O.y);
        drawArrow(O.x - 50, O.y, O.x + 250, O.y);
        ctx.fillText('x', O.x + 255, O.y + 8);

        // z-axis
        const zEndPoint = { x: O.x - 100, y: O.y + 50 };
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(zEndPoint.x, zEndPoint.y);
        drawArrow(O.x, O.y, zEndPoint.x, zEndPoint.y);
        ctx.fillText('z', zEndPoint.x - 20, zEndPoint.y + 10);

        // Origin Label
        ctx.fillText('O', O.x - 20, O.y + 20);
        ctx.stroke();

        // --- Draw Coil ---
        ctx.beginPath();
        ctx.lineWidth = 2;
        const P1 = { x: O.x, y: O.y - 140 }; // Top-left corner (8cm -> 140px)
        const P2 = { x: O.x + 130, y: O.y + 25 }; // Bottom-right corner
        const P3 = { x: P2.x, y: P2.y - 140 }; // Top-right corner

        ctx.moveTo(O.x, O.y);
        ctx.lineTo(P1.x, P1.y);
        ctx.lineTo(P3.x, P3.y);
        ctx.lineTo(P2.x, P2.y);
        ctx.closePath();
        ctx.stroke();

        // --- Draw Magnetic Field B ---
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        const b_y = O.y - 70;
        ctx.moveTo(O.x + 20, b_y);
        ctx.lineTo(O.x + 180, b_y);
        drawArrow(O.x + 20, b_y, O.x + 180, b_y);
        ctx.fillText('B', O.x + 190, b_y + 5);
        ctx.stroke();

        // --- Draw Dimensions and Angles ---
        ctx.lineWidth = 1;

        // 8 cm dimension
        ctx.beginPath();
        const dim_x_8cm = O.x - 40;
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(dim_x_8cm - 10, O.y);
        ctx.moveTo(P1.x, P1.y);
        ctx.lineTo(dim_x_8cm - 10, P1.y);
        ctx.moveTo(dim_x_8cm, O.y);
        ctx.lineTo(dim_x_8cm, P1.y);
        drawArrow(dim_x_8cm, O.y, dim_x_8cm, P1.y);
        drawArrow(dim_x_8cm, P1.y, dim_x_8cm, O.y);
        ctx.save();
        ctx.translate(dim_x_8cm - 10, (O.y + P1.y) / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.textAlign = 'center';
        ctx.fillText('8 cm', 0, -5);
        ctx.restore();
        ctx.stroke();

        // 6 cm dimension
        ctx.beginPath();
        const topEdgeVec = { x: P3.x - P1.x, y: P3.y - P1.y };
        const topEdgeAngle = Math.atan2(topEdgeVec.y, topEdgeVec.x);
        const perpAngle = topEdgeAngle - Math.PI / 2;
        const offset = 25;
        
        const ext1_start = P1;
        const ext1_end = { x: P1.x + offset * Math.cos(perpAngle), y: P1.y + offset * Math.sin(perpAngle) };
        ctx.moveTo(ext1_start.x, ext1_start.y);
        ctx.lineTo(ext1_end.x, ext1_end.y);

        const ext2_start = P3;
        const ext2_end = { x: P3.x + offset * Math.cos(perpAngle), y: P3.y + offset * Math.sin(perpAngle) };
        ctx.moveTo(ext2_start.x, ext2_start.y);
        ctx.lineTo(ext2_end.x, ext2_end.y);
        
        ctx.moveTo(ext1_end.x, ext1_end.y);
        ctx.lineTo(ext2_end.x, ext2_end.y);
        drawArrow(ext1_end.x, ext1_end.y, ext2_end.x, ext2_end.y);
        drawArrow(ext2_end.x, ext2_end.y, ext1_end.x, ext1_end.y);

        ctx.save();
        ctx.translate((ext1_end.x + ext2_end.x) / 2, (ext1_end.y + ext2_end.y) / 2);
        ctx.rotate(topEdgeAngle);
        ctx.textAlign = 'center';
        ctx.fillText('6 cm', 0, -8);
        ctx.restore();
        ctx.stroke();

        // 30 degrees angle
        ctx.beginPath();
        const bottomEdgeVec = { x: P2.x - O.x, y: P2.y - O.y };
        const bottomEdgeAngle = Math.atan2(bottomEdgeVec.y, bottomEdgeVec.x);
        ctx.arc(O.x, O.y, 40, bottomEdgeAngle, 0, true);
        ctx.stroke();
        ctx.fillText('30°', O.x + 45, O.y);

        // --- Draw Caption ---
        ctx.font = "20px 'SimSun', 'STSong'";
        ctx.textAlign = 'center';
        ctx.fillText('习题 8-46 图', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>